import React from 'react';

const AVATAR_BASE_URL = `https://wegame.gtimg.com/g.26-r.c2d3c/helper/lol/assis/images/resources/champions/`
const ITEM_BASE_URL = `https://wegame.gtimg.com/g.26-r.c2d3c/helper/lol/assis/images/resources/items/`

export default props => {
    const { data } = props;
    const myTeam = data.battle_detail.player_details.filter(item => item.teamId === data.team_id);
    const win = data.win === 'Win';
    return (
        <div className={`battle-item ${win ? 'win' : 'fail'}`}>
            {myTeam.map(player => (
                <div className={`player${(player.battleHonour.isMvp || player.battleHonour.isSvp) ? ' vp' : ''}`}>
                    <img className="avatar" src={`${AVATAR_BASE_URL}${player.championId}.png`} />
                    {decodeURI(player.name)}
                    <br />
                    {Array.from({ length: 6 }).map((_i, i) => player[`item${i}`] === 0 ? null : (
                        <img className="item" src={`${ITEM_BASE_URL}${player[`item${i}`]}.png`} />
                    ))}
                    <div className="score">
                        {(player.gameScore / 10000).toFixed(1)}
                        <br />
                        {player.championsKilled}/{player.numDeaths}/{player.assists}
                    </div>
                </div>
            ))}
        </div>
    );
}